import { Component } from 'react';
import { Typography, Card, Divider, Space, Row, Col } from 'antd';

const { Title, Paragraph, Text } = Typography;

// 修复：使用驼峰式命名法定义webkit相关样式属性
const styles = {
  gradientText: {
    background: 'linear-gradient(90deg, #1890ff 0%, #722ed1 100%)',
    WebkitBackgroundClip: 'text', // 修复：将-webkit-background-clip改为WebkitBackgroundClip
    WebkitTextFillColor: 'transparent', // 修复：将-webkit-text-fill-color改为WebkitTextFillColor
    display: 'inline-block',
  },
  shadowText: {
    color: '#1890ff',
    textShadow: '1px 1px 3px rgba(0, 0, 0, 0.3)',
  },
  hoverText: {
    color: '#1890ff',
    transition: 'color 0.3s ease',
    cursor: 'pointer',
    '&:hover': {
      color: '#722ed1',
    },
  },
  purpleText: {
    color: '#722ed1',
  },
  magentaText: {
    color: '#eb2f96',
  },
  orangeText: {
    color: '#fa8c16',
  },
  cyanText: {
    color: '#13c2c2',
  },
};

class AntdColorTextExample extends Component {
  render() {
    return (
      <div style={{ padding: '24px', maxWidth: 800, margin: '0 auto' }}>
        {/* 修复：用variant替换deprecated的bordered属性 */}
        <Card 
          title="Ant Design 字体颜色展示" 
          variant="outlined" // 原来的bordered={true}已被弃用
          style={{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }}
        >
          <Title level={4} style={{ marginBottom: 16 }}>语义化颜色文本</Title>
          
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <div>
              <Text strong>• 主色调文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <Text type="primary">这是使用主色调的文本，适合用于重要内容和标题</Text>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 成功状态文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <Text type="success">操作成功！您的设置已保存。</Text>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 警告状态文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <Text type="warning">请注意，此操作将无法撤销。</Text>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 错误状态文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <Text type="error">操作失败，请检查您的输入并重试。</Text>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 链接文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <Text type="link">这是一个链接样式的文本，通常用于可点击的文本内容</Text>
              </Paragraph>
            </div>
          </Space>
          
          <Divider style={{ margin: '24px 0' }}>特殊效果文本</Divider>
          
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <div>
              <Text strong>• 渐变色文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <span style={styles.gradientText}>这是一个渐变色文本效果，从蓝色过渡到紫色</span>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 带阴影的文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <span style={styles.shadowText}>这是一个带有阴影效果的文本，增强视觉层次感</span>
              </Paragraph>
            </div>
            
            <div>
              <Text strong>• 悬停变色文本：</Text>
              <Paragraph style={{ margin: '8px 0 0 24px' }}>
                <span style={styles.hoverText}>鼠标悬停在我上面会改变颜色</span>
              </Paragraph>
            </div>
          </Space>
          
          <Divider style={{ margin: '24px 0' }}>更多色彩选择</Divider>
          
          <div>
            <Text strong>• 其他颜色文本：</Text>
            <Row gutter={[16, 16]} style={{ margin: '16px 0 0 24px' }}>
              <Col xs={12}>
                <Text style={styles.purpleText}>紫色文本 - 适合创意内容</Text>
              </Col>
              <Col xs={12}>
                <Text style={styles.magentaText}>洋红色文本 - 适合强调和突出</Text>
              </Col>
              <Col xs={12}>
                <Text style={styles.orangeText}>橙色文本 - 适合活力和温暖的内容</Text>
              </Col>
              <Col xs={12}>
                <Text style={styles.cyanText}>青色文本 - 适合科技感的内容</Text>
              </Col>
            </Row>
          </div>
        </Card>
      </div>
    );
  }
}

export default AntdColorTextExample;
    